<template>
<view>
	<scroll-view scroll-x scroll-with-animation class="tab-view" :scroll-left="scrollLeft">
		<view v-for="(item,index) in tabbar" :key="index" class="tab-bar-item" :class="[currentTab==index ? 'active' : '']"
		 :data-current="index" @tap.stop="swichNav">
			<text class="tab-bar-title">{{item}}</text>
		</view>
	</scroll-view>
	<view class="main" v-if="currentTab == 0">
		<view v-for="(item, index) in getList" :key="index">
		   <view v-if="item.status== 4" class="content">
		      <image :src="'https://hotmall.shiliucrm.com/' + item.img"></image>
		      <view>
		      <view class="name">{{item.name}}</view>
		      <view class="time">有效期：{{item.start_time}}-{{item.end_time}}</view>
		      </view>
		   </view>
		</view>
		<view v-if="statusa" class="available">
		   <image src="/static/remao_shop/img/nocoupon.png"></image>
		   <view>暂无数据</view>
		</view>
	</view>
	<view class="main" v-if="currentTab == 1">
		<view v-for="(item, index) in getList" :key="index">
		   <view v-if="item.status== 1" class="content">
		      <image :src="'https://hotmall.shiliucrm.com/' + item.img"></image>
		      <view>
		      <view class="name">{{item.name}}</view>
		      <view class="time">有效期：{{item.start_time}}-{{item.end_time}}</view>
		      </view>
		   </view>
		</view>
		<view v-if="statusb" class="available">
		   <image src="/static/remao_shop/img/nocoupon.png"></image>
		   <view>暂无数据</view>
		</view>
	</view>
	<view class="main" v-if="currentTab == 2">
		<view v-for="(item, index) in getList" :key="index">
		   <view v-if="item.status== 3" class="content">
		      <image :src="'https://hotmall.shiliucrm.com/' + item.img"></image>
		      <view>
		      <view class="name">{{item.name}}</view>
		      <view class="time">有效期：{{item.start_time}}-{{item.end_time}}</view>
		      </view>
		   </view>
		</view>
		<view v-if="statusc" class="available">
		   <image src="/static/remao_shop/img/nocoupon.png"></image>
		   <view>暂无数据</view>
		</view>
	</view>
	<view class="bai"></view>
	<button class="centre" hover-class="none" @tap="mycoupon">去领券中心</button>
</view>
</template>

<script>
var app = getApp();
import api from "../../../api";

export default {
  data() {
    return {
      active: 0,
      getList: [],
      uid: '',
      statusa: false,
      statusb: false,
      statusc: false,
	  currentTab: 0,
	  tabbar: ['未使用','已使用','已过期']
    };
  },

  components: {},
  props: {},

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad: function () {
    wx.getStorage({
      key: 'userId',
      success: res => {
        console.log(res);
        this.setData({
          uid: res.data
        });
        this.getListFun();
      }
    });
    console.log(this.uid);
  },

  /**
   * 生命周期函数--监听页面初次渲染完成
   */
  onReady: function () {},

  /**
   * 生命周期函数--监听页面显示
   */
  onShow: function () {
    this.setData({
      statusa: false,
      statusb: false,
      statusc: false
    });
    wx.getStorage({
      key: 'userId',
      success: res => {
        console.log(res);
        this.setData({
          uid: res.data
        });
        this.getListFun();
      }
    });
  },

  /**
   * 生命周期函数--监听页面隐藏
   */
  onHide: function () {},

  /**
   * 生命周期函数--监听页面卸载
   */
  onUnload: function () {},

  /**
   * 页面相关事件处理函数--监听用户下拉动作
   */
  onPullDownRefresh: function () {
    this.getListFun();
    wx.stopPullDownRefresh();
  },

  /**
   * 页面上拉触底事件的处理函数
   */
  onReachBottom: function () {},

  /**
   * 用户点击右上角分享
   */
  onShareAppMessage: function () {},
  methods: {
    getListFun: function () {
      app.globalData.request({
        url: api.default.coupon_index,
        header: {
          'content-type': 'application/x-www-form-urlencoded'
        },
        data: {
          uid: this.uid,
          page: 1
        },
        method: 'POST',
        success: res => {
          wx.hideLoading();
          console.log(res);
          this.setData({
            getList: res.coupon
          });
          console.log(this.getList);
          var a = 0,
              b = 0,
              c = 0;
          console.log(a, b, c);

          for (let i = 0; i < res.coupon.length; i++) {
            if (res.coupon[i].status == 4) {
              a++;
            } else if (res.coupon[i].status == 1) {
              b++;
            } else if (res.coupon[i].status == 3) {
              c++;
            }
          }

          console.log(a, b, c);

          if (a == 0) {
            this.setData({
              statusa: true
            });
          }

          if (b == 0) {
            this.setData({
              statusb: true
            });
          }

          if (c == 0) {
            this.setData({
              statusc: true
            });
          }
        }
      });
    },
	
	swichNav: function(e) {
		let cur = e.currentTarget.dataset.current;
		if (this.currentTab == cur) {
			return false;
		} else {
			this.currentTab = cur
		}
		this.setData({
		  statusa: false,
		  statusb: false,
		  statusc: false
		});
		this.getListFun();
		wx.showLoading({
		  title: '加载中'
		});
	},

    onChange(event) {
      this.setData({
        statusa: false,
        statusb: false,
        statusc: false
      });
      this.getListFun();
      wx.showLoading({
        title: '加载中'
      }); // wx.showToast({
      //    title: `切换到标签 ${event.detail.index + 1}`,
      //    icon: 'none'
      // });
    },

    mycoupon() {
      wx.navigateTo({
        url: '../coupon/coupon'
      });
    }

  }
};
</script>
<style>
@import "./mycoupon.css";
::-webkit-scrollbar {
		width: 0;
		height: 0;
		color: transparent;
	}

	.tab-view::before {
		content: '';
		position: absolute;
		border-bottom: 1upx solid #eaeef1;
		-webkit-transform: scaleY(0.5);
		transform: scaleY(0.5);
		bottom: 0;
		right: 0;
		left: 0;
	}

	.tab-view {
		width: 100%;
		height: 100upx;
		overflow: hidden;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		z-index: 99;
		background: #fff;
		white-space: nowrap;
	}

	.tab-bar-item {
		padding: 0 10upx;
		width: 210upx;
		height: 100upx;
		min-width: 80upx;
		line-height: 100upx;
		margin: 0 20upx;
		display: inline-block;
		text-align: center;
		box-sizing: border-box;
	}

	.tab-bar-title {
		height: 100upx;
		line-height: 100upx;
		font-size: 28upx;
		color: #999;
		font-weight: 400;
	}

	.active {
		border-bottom: 6upx solid #e51f54;
	}

	.active .tab-bar-title {
		color: #333 !important;
		font-size: 28upx;
		font-weight: 500;
	}

	.main {
		margin-top: 100upx;
	}
</style>